<template>
  <div>
    <mu-container class="scrllor">
      <mu-card class="advert-box" v-if="advert!==''">
        <img :src="advert" alt/>
      </mu-card>
      <mu-card class="box-1 port-box">
        <div class="title-box port-box__title">
          <div class="title_name">使用设备端口</div>
          <div>
            <ul class="status-box">
              <li>
                <span class="circle blue"></span>空闲
              </li>
              <li>
                <span class="circle green"></span>使用中
              </li>
              <li>
                <span class="circle red"></span>故障
              </li>
            </ul>
          </div>
        </div>
        <mu-row gutter>
          <mu-col
            span="3"
            v-for="(item,index) in protList"
            :key="index"
            :class="{ checkprot:index==current ,inuse:item.state=='Y',errorport:item.state =='F'}"
            @click="checkprot(index,item)"
          >
            <div class="grid-cell">
              <span class="iconfont icon-FT1300"></span>
              <p class="port-box__name">{{item.name}}</p>
              <input
                type="radio"
                name="prot-id"
                :checked="index==current"
                :value="item.id"
                :disabled="item.state=='Y'"
              />
            </div>
          </mu-col>
        </mu-row>
      </mu-card>
      <mu-card class="box-1 time-box">
        <div class="title-box">
          <p>充电时长</p>
        </div>
        <div class="time-box__items">
          <mu-row gutter>
            <mu-col
              span="3"
              v-for="(item,index2) in timeList"
              :key="index2"
              :class="{ checkprot:index2==time}"
              @click="checktime(index2,item.id,item)"
            >
              <div class="grid-cell" v-if="item.chargeType==3001" @click="iszhineng=false">
                {{item.time}}小时
                <input
                  type="radio"
                  name="time-id"
                  :checked="index2==time"
                  :value="item.id"
                />
              </div>

              <div class="grid-cell" v-else @click="iszhineng=true">
                智能充满
                <input
                  type="radio"
                  name="time-id"
                  :checked="index2==time"
                  :value="item.id"
                  :hour="item.time"

                />
              </div>
            </mu-col>
          </mu-row>
        </div>
        <mu-form :model="form" class="mu-demo-form" :label-position="labelPosition" label-width="100">
          <mu-row gutter align-items="center" style="width: 100%;">
            <mu-col span="9">
              <input
                maxlength="5"
                v-model="custom_time"
                class="my-input"
                @click="customize"
                placeholder="自定义时长"
              />
            </mu-col>
            <mu-col span="3">
              <div class="time-box__cfm_btn" @click="chkcustomize">确认</div>
            </mu-col>
          </mu-row>
        </mu-form>
      </mu-card>
    </mu-container>
    <mu-row gutter>
      <mu-col span="12">
        <mu-paper>
          <mu-list>
            <mu-list-item>
              <mu-list-item-content>
                <mu-list-item-title>
                  <span class="fleft">计费方式</span>
                  <span class="fright" @click="chargingdu" v-show="iszhineng" style="color:#1FC3F2">智能充满</span>
                  <span
                    class="fright"
                    @click="chargingxs"
                    style="margin-right:10px;color:#1FC3F2"
                    v-show="Chargingtime"
                  >按时收费</span>
                </mu-list-item-title>
              </mu-list-item-content>
            </mu-list-item>

            <mu-list-item>
              <mu-list-item-content>
                <mu-list-item-title>
                  <span class="fleft">计费规则</span>
                </mu-list-item-title>
              </mu-list-item-content>
            </mu-list-item>
            <div style="color: white;
    line-height: 30px;
    padding: 15px;">

              <div v-for="item in feeTips">{{item.feeTip}}</div>

            </div>


          </mu-list>
        </mu-paper>
      </mu-col>
    </mu-row>
    <transition name="fade" enter-active-class="fadeInDown" leave-active-class="fadeOutUp">
      <div id="success-box" v-show="successShow" :successShow="successShow" class="successShowModal">
        <mu-row gutter>
          <mu-col span="12">
            <mu-paper>
              <mu-list>
                <mu-list-item>
                  <mu-list-item-content>
                    <mu-list-item-title>
                      <span class="fleft">余额</span>
                      <span class="fright">{{amount}}</span>
                    </mu-list-item-title>
                  </mu-list-item-content>
                </mu-list-item>

                <mu-list-item>
                  <mu-list-item-content>
                    <mu-list-item-title>
                      <span class="fleft">地址</span>
                      <span class="fright">{{address}}</span>
                    </mu-list-item-title>
                  </mu-list-item-content>
                </mu-list-item>

                <mu-list-item>
                  <mu-list-item-content>
                    <mu-list-item-title>
                      <span class="fleft">充电桩ID</span>
                      <span class="fright">{{ChargingID}}</span>
                    </mu-list-item-title>
                  </mu-list-item-content>
                </mu-list-item>

                <mu-list-item>
                  <mu-list-item-content>
                    <mu-list-item-title>
                      <span class="fleft">端口号</span>
                      <span class="fright">{{port_name}}</span>
                    </mu-list-item-title>
                  </mu-list-item-content>
                </mu-list-item>


                <mu-list-item>
                  <mu-list-item-content>
                    <mu-list-item-title style="height: 40px">
                      <span class="fleft"> <mu-button class="blur-btn btn out-btn" @click="cancelStart"
                                                      id="close">取消</mu-button></span>
                      <span class="fright">        <mu-button :disabled="isDisabled" class="blur-btn btn"
                                                              style="float: right;right: 0;width:50%"
                                                              @click="startOrder">开始充电</mu-button>
</span>
                    </mu-list-item-title>
                  </mu-list-item-content>
                </mu-list-item>
              </mu-list>
            </mu-paper>
          </mu-col>
        </mu-row>
        <van-dialog
          v-model="tishishow"
          title="提示"
          @confirm="confirmHandle"
        >
          <div style="text-align: center"> {{message}}<br>请至少充值<span style="font-size: 20px;color:red">{{result}}</span>元</div>
        </van-dialog>
        <!--    <mu-button class="start-btn btn" style="padding:30px" @click="startOrder">开始充电</mu-button>-->
      </div>
    </transition>
  </div>
</template>

<script>
    import Vue from "vue";
    import {Toast, Dialog} from "vant";
    import "vant/lib/toast/style/index";
    import "vant/lib/dialog/style/index";
    Vue.use(Dialog)
    export default {
        data() {
            return {
                successShow: false,
                tishishow: false,
                port_name: '',
                message: '',
                ChargingID: this.$store.state.ChargingID,
                chargingdumoney: 0,
                Chargingtime: false,
                iszhineng: false,
                amount: "",
                current: -1,
                time: -1,
                address: "",
                state: "",
                advert: "",
                custom_time: "",
                feeTips: [],
                orderdata: {
                    type: 8001,
                    port_id: 0,
                    order_hour: 0
                },
                protList: [
                    {
                        devicePortNum: "88-1",
                        id: 1,
                        name: "1号端口",
                        state: "Y"
                    },
                    {
                        devicePortNum: "88-2",
                        id: 2,
                        name: "2号端口",
                        state: "N"
                    }
                ],
                timeList: [],
                result: "",
                labelPosition: "top",
                form: {
                    input: "",
                    select: "",
                    date: "",
                    radio: "",
                    checkbox: [],
                    switch: false,
                    slider: 30,
                    textarea: ""
                }
            };
        },
        methods: {
            confirmHandle(){
                this.$router.push('/vainvest')
            },
            cancelStart() {
                this.time = -1;
                this.orderdata.order_hour = 0;
                this.orderdata.port_id = 0;
                this.current = -1;
                this.iszhineng = false;
                this.successShow = false;
                this.custom_time = ''
            },
            //选择端口
            checkprot(index, item) {
                if (item.state !== 'N') {
                    return false;
                }
                this.current = index;
                this.orderdata.port_id = item.id;
                this.port_name = item.name;
                if (this.orderdata.order_hour || this.iszhineng) {
                    this.successShow = true;
                }
            },
            //选择时间
            checktime(index, id, item) {
                this.orderdata.order_hour = item.time;

                if (item.chargeType == 3001) {
                    this.orderdata.type = 8001;
                    this.Chargingtime = true;
                } else {
                    this.orderdata.type = 8002;
                    this.Chargingtime = false;
                }
                this.time = index;
                this.form.input = "";
                if (this.orderdata.port_id) {
                    this.successShow = true
                }
                // if (id == 1) {
                //   this.Chargingtime = false;
                // } else {
                //   this.Chargingtime = true;
                // }
            },
            //自定义时间
            customize() {
                this.time = -1;
                this.Chargingtime = true;
                this.iszhineng = false;
                this.orderdata.order_hour = 0;
            },
            chkcustomize() {
                if (!this.orderdata.port_id) {
                    Toast("请选择充电端口");
                }
                if (!this.orderdata.order_hour) {
                    Toast("请输入充电时间");
                }
                if (this.orderdata.port_id && this.orderdata.order_hour) {
                    this.successShow = true
                }
            },
            //确定自定义时长
            customizeSure() {

            },

            //展示按度充电规则
            chargingdu() {
                this.$alert("按度收费", "", {
                    okLabel: "知道了"
                }).then(() => {
                });
            },
            //展示按小时收费规则
            chargingxs() {
                this.$alert("按小时收费", "", {
                    okLabel: "知道了"
                }).then(() => {
                });
            },
            //开始充电
            startOrder() {
                let order_order_type = this.orderdata.type;
                let order_port_id = this.orderdata.port_id;
                let order_hour = this.orderdata.order_hour;
                console.log(this.iszhineng)
                if (order_port_id == "") {
                    Toast("请选择充电端口");
                    return;
                }
                if (order_hour == "" && !this.iszhineng) {
                    Toast("请选择充电时长");
                    return;
                }
                this.$api
                    .saveOrder(order_order_type, order_port_id, order_hour)
                    .then(res => {
                        if (res.data.code == 0) {
                            Toast("开始充电");
                            this.$router.push({
                                path: "/startsuccess/" + res.data.result
                            });
                        } else if (res.data.code == 3004) {
                            this.message = res.data.msg
                            this.result = res.data.result
                            this.tishishow = true
                        } else if (res.data.code == 2004) {
                            Dialog.alert({
                                title: '提示',
                                message: '设备网络差'
                            }).then(() => {
                                this.$router.push("/sweep");
                            });
                        } else {
                            Toast({
                                message: res.data.msg,
                                duration: 2000
                            });
                            this.$router.push("/sweep");
                        }
                    });
            },
            compare(p) { //这是比较函数
                return function (m, n) {
                    var a = m[p];
                    var b = n[p];
                    return a - b; //升序
                }
            },
            getvar(url, par) {
                var urlsearch = url.split('?');
                if (!urlsearch[1]) {
                    return false
                }
                var pstr = urlsearch[1].split('&');
                for (var i = pstr.length - 1; i >= 0; i--) {
                    var tep = pstr[i].split("=");
                    if (tep[0] === par) {
                        return tep[1];
                    }
                }
                return false;
            },
            getFeeTips() {
                this.$api.getFeeTips({chargingPileNo: this.ChargingID}).then(res => {
                    console.log(res);
                    if (res.data.code == 0) {
                        this.feeTips = res.data.result;
                    }
                });
            },
            initChargingId(url) {
                var scanid = this.getvar(url, 'scanid')
                if (!scanid) {
                    return false
                }
                this.$api.getChargingPileData(scanid).then(res => {

                    if (res.data.code != 0) {
                        Toast(res.data.msg);
                        return;
                    }
                    this.$store.dispatch("setChargingID", scanid);
                });
            },
        },
        mounted() {
            if (typeof window.entryUrl === 'undefined' || window.entryUrl === '') {
                window.entryUrl = location.href.split('#')[0]
            }
            let Url = /(Android)/i.test(navigator.userAgent) ? location.href.split('#')[0] : window.entryUrl;
            this.initChargingId(Url)
            //获得余额
            this.$api.queryAccountBalance().then(res => {
                this.amount = res.data.result.accountAmount;
            });
            this.$api.getChargingPileData(this.$store.state.ChargingID).then(res => {
                let data = res.data;
                if (data.code == 2) {
                } else if (data.code == 2004) {
                    Dialog.alert({
                        title: '提示',
                        message: '设备网络差'
                    }).then(() => {
                        this.$router.push("/sweep");
                    });
                } else if (data.code == 6005) {
                    Toast({
                        message: data.msg,
                        duration: 2000
                    })
                    this.$router.push("/bindphone")
                } else {
                    this.address = data.result.pkaddress;
                    this.protList = data.result.list;
                }
            }),
                //广告
                this.$api.showAdvert(1001).then(res => {
                    this.advert = res.data.result.imageUrl;
                });
            //充电时长
            this.$api
                .queryChargingPilePrice(this.$store.state.ChargingID, 3001)
                .then(res => {
                    // this.timeList = res.data.result;
                    let arr = [];
                    res.data.result.forEach(e => {
                        if (e.chargeType == 3002) {
                            // arr.push(e);
                        }
                    });
                    let arr2 = [];
                    res.data.result.forEach(e => {
                        if (e.chargeType == 3001 && e.type == 1) {
                            arr2.push(e);
                        }
                    });
                    arr2.sort(this.compare("time"));
                    arr2.forEach(e => {
                        arr.push(e);
                    });

                    this.timeList = arr;
                });
            this.getFeeTips();
        },
        watch: {
            custom_time: function (v) {
                this.orderdata.order_hour = v;
            }
        }
    };
</script>

